import React,{ Component } from "react";
import {Breadcrumb, Icon, Button, Row, Col, message} from 'antd'
import { Link, withRouter } from 'react-router-dom'
import TemplateA from '../../../components/Goods/Detail/Templates/TemplateA'
import API from "../../../api/Goods/goods";
// const Option = Select.Option
class PersonList extends Component{
    state = {
        shopStoreList: [],
        goodsImg: null,
        checkedShopStore: [],
        shop_id: null
    }
	componentDidMount(){
        if (this.props.history.location.state && (!this.props.history.location.state.hasOwnProperty('cat_id') || !this.props.history.location.state.hasOwnProperty('cat_name'))) {
            message.error('请先选择分类！')
            setTimeout( () => {
                this.props.history.push("/goods/detail/select")
            }, 500)
        }
        this.setState({cat_name: this.props.history.location.state.cat_name, cat_id:this.props.history.location.state.cat_id})
        if (this.props.history.location.state && this.props.history.location.state.hasOwnProperty('goods_id') && this.props.history.location.state.hasOwnProperty('cat_id') && this.props.history.location.state.hasOwnProperty('cat_name')) {
            this.getGoodInfo( this.props.history.location.state.goods_id)
            this.setState({goods_id: this.props.history.location.state.goods_id})
        }
        if (this.props.history.location.state && this.props.history.location.state.hasOwnProperty('shop_id') ) {
            console.log(this.props.history.location.state.shop_id)
            this.setState({shop_id: this.props.history.location.state.shop_id})
            this.getStoreList(this.props.history.location.state.shop_id, true)
        }
	}
    reChoose = () => {
        this.props.history.push("/goods/detail/select", {goods_id: this.state.goods_id})
    }
    getStoreList = (e, fromBussness) => {
        API.getShopStoreList({shop_id: e}).then(res => {
            this.setState({shopStoreList: res.data.shopStore})
            if (fromBussness && res.data.shopStore) {
                this.setState({checkedShopStore: res.data.shopStore.map(v => v.id)})
            }
        })
    }
    getGoodInfo = (id) => {
        API.getGoodInfo({goods_id: id}).then(res => {
            if (res.error === 0) {
                this.getStoreList(res.data.goodsInfo.shop_id)
                this.setState({goodsInfo: res.data.goodsInfo})
                this.setState({goodsImg: res.data.goodsImg.map((v, index) => {
                        let obj = {
                            uid: index,
                            url: v.src,
                            name: v.name
                        }
                        return obj
                    })
                })
                let arr = []
                res.data.shopStore.forEach(v => {
                    if (v.checked && v.checked === 1) {
                        arr.push(v.id)
                    }
                })
                this.setState({checkedShopStore: arr})
            } else {
                message.error(res.msg || '失败！')
            }
        })
    }
    reGetStoreList = (e) => {
        this.getStoreList(e)
        this.setState({checkedShopStore: []})
    }
	render(){
		return(
			<div style={{height: 400}}>
				<div className="common-bread">
                    <Breadcrumb style={{ margin: '12px 0' }}>
                        <Breadcrumb.Item>
                            <Link to={`/dashboard`}><Icon type="home" /></Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>商品管理</Breadcrumb.Item>
                        <Breadcrumb.Item>商品</Breadcrumb.Item>
                    </Breadcrumb>
				</div>
               <div className='classify-header'>
                   <Row>
                       <Col span={12}>您当前选择的是：{this.state.cat_name}</Col>
                       <Col span={12} style={{textAlign: 'right'}}><Button type='primary' onClick={this.reChoose}>重新选择</Button></Col>
                   </Row>
               </div>
               <div>
                   <TemplateA shop_id={this.state.shop_id} cat_id={this.state.cat_id} cat_name={this.state.cat_name} clearCheckedShopStore={this.clearCheckedShopStore} checkedShopStore={this.state.checkedShopStore} reGetStoreList={this.reGetStoreList} goodsImg={this.state.goodsImg} goodsInfo={this.state.goodsInfo} shopStoreList={this.state.shopStoreList}></TemplateA>
               </div>
			</div>
		)
	}
}
export default withRouter(PersonList);